<script setup>
import { ref } from "vue"
const count = ref(0)

function click(Text){
    /* 
        内联事件处理器，回调函数由我们自己调用，参数也是我们自己传递的

        在内联事件处理器中，可以使用$event来访问事件对象
    */
   //可以通过事件对象来取消事件的传播
//    event.stopPropagation()
   alert(Text)
}
</script>

<template>
    <h1>{{ count }}</h1>
    <!-- 
        为元素绑定事件：
            -绑定单击事件用v-on
            -@事件名 （简写）
            -绑定事件的两种方式
                -内联事件处理器
                    -事件触发时，直接执行js语句
                    -内联事件处理器，回调函数的参数有我们自己传递
                -方法事件处理器
                    -事件触发时，vue会对事件的函数进行调用
                    -方法事件处理器，回调函数的参数由vue帮我们反转
            -vue是如何区分两种处理器：
                检查事件的值是否是合法的js标识符或属性访问路径
                如果是，则表示它是方法事件处理器
                否则，表示它是内联事件处理器

     -->
    <button @click="count++">方法事件处理器</button>
    <button @click="click">点我一下</button>
    <button @click="click()">内联事件处理器</button>

    <hr>
    <!-- <div class="box1"   @click="click( $event ,'1')">
        <div class="box2" @click="click($event ,'2')">
            <div class="box3" @click="click($event ,'3')"></div>
        </div>
    </div> -->
    <div class="box1" @click="click( '1')">
        <div class="box2" @click="click('2')">
            <div class="box3" @click.stop="click('3')"></div>
        </div>
    </div>
</template>
<style scoped>
.box1{
    background-color: #bfa;
    width: 200px;
    height: 200px;
}
.box2{
    background-color: red;
    width: 150px;
    height: 150px;
}
.box3{
    background-color: yellow;
    width: 100px;
    height: 100px;
}
</style>